<!DOCTYPE html>
<html>
<head>
<title>秀视频后台管理平台-图片上传</title>
<meta name="keywords" content="秀视频后台管理平台">
<meta name="description" content="秀视频后台管理平台欢迎您的到来">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
	href="../css/webuploader.css">
<link rel="stylesheet" type="text/css"
	href="../css/bootstrap.min14ed.css">
<link rel="stylesheet" type="text/css"
	href="../css/bootstrap.min.css">

<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
	<div id="uploader" class="wu-example" >
		<!--用来存放文件信息-->
		<div id="thelist" class="uploader-list"></div>
		<div class="btns">
			<div id="picker">选择文件</div>
			<button id="ctlBtn" class="btn btn-default">开始上传</button>
		</div>
	</div>
	<script type="text/javascript" src="../js/webuploader.js"></script>
	<script type="text/javascript" >
		$(function() {
			var $list = $("#thelist");
			var $btn = $("#ctlBtn");
			var state = 'pending'; // 上传文件初始化
			var uploader = WebUploader
					.create({
						swf : 'webuploader/Uploader.swf',
						server:'../../bgm/addSubmit.do',
						pick : '#picker',
						resize: false,
					    chunked: true,           //开启分片上传
					    chunkSize: 1024*1024*4,  //每一片的大小
					    chunkRetry: 100,         // 如果遇到网络错误,重新上传次数
					    threads: 3,              //上传并发数。允许同时最大上传进程数。
					    fileSingleSizeLimit: 5*1024* 1024 * 1024    // 单个文件大小限制 5 G
						
					});
			uploader.on('fileQueued', function(file) {
				$list.append('<div id="' + file.id + '" class="item">'
						+ '<h4 class="info">' + file.name + '</h4>'
						+ '<p class="state">等待上传...</p>' + '</div>');
			});

			uploader
					.on(
							'uploadProgress',
							function(file, percentage) {
								var $li = $('#' + file.id), $percent = $li
										.find('.progress .progress-bar');

								// 避免重复创建
								if (!$percent.length) {
									$percent = $(
											'<div class="progress progress-striped active">'
													+ '<div class="progress-bar" role="progressbar" style="width: 0%">'
													+ '</div>' + '</div>')
											.appendTo($li)
											.find('.progress-bar');
								}

								$li.find('p.state').text('上传中');

								$percent.css('width', percentage * 100 + '%');
							});

			uploader.on('uploadSuccess', function(file) {
				$('#' + file.id).find('p.state').text('已上传');
			});

			uploader.on('uploadError', function(file) {
				$('#' + file.id).find('p.state').text('上传出错');
			});

			uploader.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').fadeOut();
			});
			$btn.on('click', function() {
				if (state === 'uploading') {
					uploader.stop();
				} else {
					uploader.upload();
				}
			});

		});
	</script>
</body>
</html>
